import React from 'react';
import { Card, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';

class CloudTable extends React.Component {
  constructor () {
    super();
    this.state = {

    };
  }

  copyToClipboard = (element) => () => {
    var $temp = $('<input>');
    $('body').append($temp);
    $temp.val($(element).text()).select();
    document.execCommand('copy');
    $temp.remove();
  }

  render () {
    let TABLE = 'Role';
    return (
      <div>
        <div className='method'>
          <a id='CloudTable-constructor' name='CloudTable-constructor' className='section-anchor' />
          <Card style={{ marginBottom: 16 }} onExpandChange={this.handleExpandChange}>
            <CardHeader
              title='Create a CloudTable'
              actAsExpander
              showExpandableButton
              style={{ backgroundColor: '#f4f4f4', padding: '10px 16px' }}
            />
            <CardMedia>
              <div className='method-example' id='api-summary-example'>
                <span className='pull-right flag fa fa-clipboard' title='Copy..' onClick={this.copyToClipboard('#pre_create')} />
                <pre id='pre_create'>
                  <span className='code-red'>{
                    `var`}</span>{` table = `}<span className='code-red'>{`new`}</span>{` CB.CloudTable(`}<span className='code-yellow'>{`"${TABLE}"`}</span>{`);`
                  }
                </pre>
              </div>{/* method-example */}
            </CardMedia>
            <CardTitle title='CloudTable( tableName )' expandable
              subtitle='All the tables are in CloudBoost is a type of CloudTable. Pass the table name as a parameter to initialize a CloudTable.' />
            <CardText expandable>
              <div className='method-description'>
                <div className='method-list'>
                  <h6>Arguments</h6>
                  <dl className='argument-list'>
                    <dt>tableName</dt>
                    <dd className>String <span>Table should not start with a number and should not contain any spaces and special characters.</span></dd>
                    <div className='clearfix' />
                  </dl>
                  <h6>Returns</h6>
                  <p>A CloudTable object</p>
                </div>
              </div>
            </CardText>
          </Card>
          <a id='CloudTable-save' name='CloudTable-save' className='section-anchor' />
          <Card style={{ marginBottom: 16 }} onExpandChange={this.handleExpandChange}>
            <CardHeader
              title='Save a created Table'
              actAsExpander
              showExpandableButton
              style={{ backgroundColor: '#f4f4f4', padding: '10px 16px' }}
            />
            <CardMedia>
              <div className='method-example' id='api-summary-example'>
                <span className='pull-right flag fa fa-clipboard' title='Copy..' onClick={this.copyToClipboard('#pre_save')} />
                <pre id='pre_save'>
                  <span className='code-red'>{
                    `var`}</span>{` table;;
table = `}<span className='code-red'>{`new`}</span>{` CB.CloudTable(`}<span className='code-yellow'>{`"NewTable"`}</span>{`);
table.save().then(`}<span className='code-red'>{`function`}</span>{`(response){
    //success response
},`}<span className='code-red'>{`function`}</span>{`(){
    //get error response
});`
                  }
                </pre>
              </div>{/* method-example */}
            </CardMedia>
            <CardTitle title='CloudTable.save( [callback] )' expandable
              subtitle="Save a CloudTable Object. It will automatically create all default columns for a table. If you want to create a user table or role table then just pass 'User' or 'Role' as an argument while creating cloudtable object." />
            <CardText expandable>
              <div className='method-description'>
                <div className='method-list'>
                  <h6>Arguments</h6>
                  <dl>
                    <dt>callback</dt>
                    <dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
                    <div className='clearfix' />
                  </dl>
                  <h6>Returns</h6>
                  <p>CloudTable Object</p>
                </div>
              </div>
            </CardText>
          </Card>
          <a id='CloudTable-delete' name='CloudTable-delete' className='section-anchor' />
          <Card style={{ marginBottom: 16 }} onExpandChange={this.handleExpandChange}>
            <CardHeader
              title='Delete a created Table'
              actAsExpander
              showExpandableButton
              style={{ backgroundColor: '#f4f4f4', padding: '10px 16px' }}
            />
            <CardMedia>
              <div className='method-example' id='api-summary-example'>
                <span className='pull-right flag fa fa-clipboard' title='Copy..' onClick={this.copyToClipboard('#pre_delete')} />
                <pre id='pre_delete'>
                  <span className='code-red'>{
                    `var`}</span>{` table = `}<span className='code-red'>{`new`}</span>{` CB.CloudTable(`}<span className='code-yellow'>{`"${TABLE}"`}</span>{`);
table.delete().then(`}<span className='code-red'>{`function`}</span>{`(response){
    //success response
},`}<span className='code-red'>{`function`}</span>{`(){
    //get error response
});`
                  }
                </pre>
              </div>{/* method-example */}
            </CardMedia>
            <CardTitle title='CloudTable.delete( [callback] )' expandable
              subtitle='Delete a CloudTable object i.e. delete a table of an App.' />
            <CardText expandable>
              <div className='method-description'>
                <div className='method-list'>
                  <h6>Arguments</h6>
                  <dl>
                    <dt>callback</dt>
                    <dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
                    <div className='clearfix' />
                  </dl>
                  <h6>Returns</h6>
                  <p>Success or Error Status</p>
                </div>
              </div>
            </CardText>
          </Card>
        </div>
      </div>
    );
  }
}

export default CloudTable;
